// 为了便于维护 这个超级大项目 路由守卫抽离出来
import router from './router'
import store from './store'
// import { Message } from 'element-ui'
// 导入进度条这个包
import NProgress from 'nprogress' // progress bar
// 导入进度条的css样式
import 'nprogress/nprogress.css' // progress bar style
import { getToken } from '@/utils/auth' // get token from cookie
import getPageTitle from '@/utils/get-page-title'

NProgress.configure({ showSpinner: false }) // NProgress Configuration

const whiteList = ['/login', '/404'] // no redirect whitelist

// 应该是进入页面之前 就获取到用户信息  然后再进来 => 路由前置守卫调用action 得等数据回来再next()
router.beforeEach(async(to, from, next) => {
  // start progress bar
  NProgress.start()

  // set page title
  document.title = getPageTitle(to.meta.title)

  // determine whether the user has logged in
  const hasToken = getToken()
  if (hasToken) {
    if (to.path === '/login') {
      next('/')
      NProgress.done() // 这里需要手动关闭进度条 没有放行 到不了后置守卫
    } else {
      // 应该这里发请求  调用action => 数据拿到了 放行 => 保证进入之前 获取到了用户信息
      // 第一次获取完用户信息后 就不需要发了 => 如果没有用户信息 发请求 有就不发了
      if (!store.getters.userId) {
      // // if (!store.state.user.userInfo.userId) {

        // 应该这里发请求  调用action => 数据拿到了 放行 => 保证进入之前 获取到了用户信息
        await store.dispatch('user/getUserInfo')
      }
      next()
    }
  } else {
    // ...不可能 这里都没有token 发什么请求
    if (whiteList.includes(to.path)) {
      next()
    } else {
      next('/login')
      NProgress.done() // 这里需要手动关闭进度条 没有放行 到不了后置守卫
    }
  }
})

router.afterEach(() => {
  // finish progress bar
  NProgress.done()
})

/*
  路由守卫 => 重写一下(锻炼)

    有token => 放行(非要去登录 引导到首页)

    没有token => 拦截到登录(可以去白名单页面)

  守卫
    前置守卫 页面被匹配显示之前
      前置守卫的语法 => router.beforeEach( (to, from, next) => {} )
    后置守卫 页面被匹配显示之后
      后置守卫的语法 => router.afterEach( (to, from) => {} )

    坑: 前置守卫一定会触发  后置守卫不一定会触发(前置守卫中没放行)

    场景: 页面访问进度条 => 前置守卫中开启进度条 => 后置守卫中关闭进度条
*/
